<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .btn-toggle {
            width: 60px;
            height: 50px;
            cursor: pointer;
            border: 1px solid #ccc;
        }

        .form {
            margin-top: 20px;
            font-size: 0;
        }

        .form input {
            outline: none;
            border: 1px solid #ccc;
            width: 420px;
            height: 40px;
            padding: 0 0 0 20px;
            font-size: 20px;
            box-sizing: border-box;
            vertical-align: middle;
        }

        .form button {
            border: 1px solid #ccc;
            width: 100px;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <button class="btn-toggle">中文</button>

    <div class="form">
        <input type="text">
        <button class="btn-send">校验语言</button>
    </div>

    <script>
        // 要求：
        // 点击“中文”按钮，切换语言“英文”,此处为切换按钮(开关)
        // 点击“校验语言”按钮，就判断输入的信息（文本），是哪个国家的语言
        // 输入框不能为空
        // 如果是中文，那就提示：中国语言
        // 如果是英文，那就提示：外国语言
        // 如果是数字标点符，那就提示：无法判断语言来源

        // 思考：
            // 控制哪些标签(两个按钮和一个输入框)
            // 如何实现切换语言（开关）
            // 准本正则表达式 1. 中文正则表达式  2. 英文表达式
            // 中文： [\u4e00-\u9fa5]
            // 英文:  [a-zA-Z]

        // 编码:    
            //  获取相关的标签
            var btnToggle = document.querySelector(".btn-toggle");
            var btnTest = document.querySelector(".btn-send");
            var inputEl = document.querySelector(".form input");

            // 切换语言 , 全局变量
            var lang = "中国语言";
            var regExp = /[\u4e00-\u9fa5]/;
            var bool = true;

            // 事件绑定
            // 设置国家语言
            btnToggle.onclick = function(){
                if(bool){
                    // 变量名称 = 值
                    lang = "外国语言";
                    this.innerText = "英文";
                    regExp = /[a-zA-Z]/;
                    bool = false;
                }else {
                    lang = "中国语言";
                    this.innerText = "中文";
                    regExp = /[\u4e00-\u9fa5]/;
                    bool = true;
                }
            }
            // console.log(lang);

            
            // 校验国家语言
            btnTest.onclick = function(){
                // 获取输入框的值
                var v1 = inputEl.value;
                // 判断输入的值是否为空
                if(v1.length == 0){
                    console.log("输入框不能为空!");
                    return ;
                }
                // 识别语言
                if(regExp.test(v1) && bool){//中文
                    console.log(v1,lang);
                }
                if(regExp.test(v1) && !bool){//英文
                    console.log(v1,lang);
                }
                // 无法识别语言
                if((!regExp.test(v1) && bool ) || (!regExp.test(v1) && !bool)){
                    console.log("无法判断语言来源");
                }
            }



    </script>
</body>

</html>